<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="shopForm" :model="form" :rules="rules" label-width="100px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">添加信息</span>
      </div>
      <el-form-item label="仓库名称" prop="name">
        <el-col :span="12">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>
      <el-form-item label="所属部门" prop="officeId">
        <el-col :span="12">
          <el-input v-model="topName" suffix-icon="el-icon-search" @focus="dialogShow" />
        </el-col>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-col :span="5">
          <el-select style="width: 100%;" v-model="form.type" placeholder="请选择类型" @change="typeChange">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="typeOneDisabled" />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="选择店长" prop="managerId" v-if="form.type==0">
        <el-col :span="5">
          <el-select
            v-model="form.managerId"
            style="width: 100%;"
            placeholder="请选择店长"
            filterable
            :filter-method="queryMember"
          >
            <el-option v-for="item in memberOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="联系人" prop="linkman">
        <el-col :span="12">
          <el-input v-model="form.linkman" />
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话" prop="telephone">
        <el-col :span="12">
          <el-input v-model="form.telephone" />
        </el-col>
      </el-form-item>
      <el-form-item label="所在地" prop="areaName">
        <el-col :span="12">
          <Distpicker :province="district.province" :city="district.city" :area="district.area" @selected="onSelected" />
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-col :span="12">
          <el-input v-model="form.address" />
        </el-col>
      </el-form-item>
      <el-form-item label="具体位置" prop="lat">
        <el-col :span="12">
          <el-button type="primary" round @click="mapShowFn"><i class="el-icon-map-location" /> 点击选择定位</el-button>
        </el-col>
      </el-form-item>
      <el-form-item label="打印机用户">
        <el-col :span="5">
          <el-input v-model="form.printeru" />
        </el-col>
      </el-form-item>
      <el-form-item label="打印机密钥">
        <el-col :span="5">
          <el-input v-model="form.printerp" />
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button v-permission="['storeHouse.add']" type="primary" :loading="clicked" @click="saveshop('shopForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[form.lng, form.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style scoped>
  .menu-wrapper{
    margin: 15px;
  }
</style>
<script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import { EventBus } from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import OfficeDialog from '@/components/OfficeDialog'
  import { save } from '@/api/shop'
  import Distpicker from '@/components/Distpicker/Distpicker'
  import Map from '@/components/GaodeMap/index'
  import { list as sysEmployeeList } from '@/api/sysEmployee'
  export default {
    name: 'storeHouse-add',
    directives: { permission },
    filters: {

    },
    components: {
      OfficeDialog,
      Distpicker,
      Map
    },
    data() {
      return {
        tempLng: '',
        tempLat: '',
        mapShow: false,
        district: {},
        clicked: false, // 按钮防双击
        topName: '',
        typeOneDisabled: false, // 公司类型是否禁用
        typeTwoDisabled: false, // 部门类型是否禁用
        typeOptions: [
          // { value: 0, label: '店铺' },
          { value: 2, label: '仓库' },
          // { value: 1, label: '提货点' }
        ],
        memberOptions: [],
        form: {
          id: '',
          name: '',
          officeId: '',
          linkman: '',
          telephone: '',
          status: 0,
          type: 2,
          modifyDate: '',
          address: '', // 地址
          lng: '', // 经度
          lat: '', // 纬度
          areaName: '',
          printeru: '',
          printerp: '',
          managerId: null
        },
        rules: {
          name: [
            { required: true, message: '请输入组织名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          officeId: [
            { required: true, message: '请选择所属部门' }
          ],
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ],
          telephone: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          areaName: [
            { required: true, message: '请选择仓库所在地址' }
          ],
          address: [
            { required: true, message: '请选择仓库详细地址' }
          ],
          lat: [
            { required: true, message: '请选择仓库具体坐标' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'blur' }
          ],
          managerId: [
            { required: true, message: '请选择店长', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      if (!utils.isNull(this.$route.query.rowData.id)) {
        if (this.$route.query.rowData.type == 1) {
          this.typeOneDisabled = true
        }
        this.topName = this.$route.query.rowData.name
        this.form.officeId = this.$route.query.rowData.id
      } else {
        this.typeTwoDisabled = true
      }
      this.queryMember()
    },
    methods: {
      queryMember(query) {
        clearTimeout(this.memberMark)
        this.memberMark = setTimeout(() => {
          this.memberOptions = []
          sysEmployeeList({ name: query }).then(res => {
            this.memberOptions = res.data.data
          }).catch(err => { console.log(err) })
        }, 300)
      },
      typeChange(e) {
        if (e !== 0) {
          this.form.managerId = ''
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      mapShowFn() {
        this.mapShow = !this.mapShow
      },
      getMap(lng, lat) {
        console.log(lng, lat)
        // 定义变量保存经纬度
        this.tempLng = lng
        this.tempLat = lat
      },
      savelngLat() {
        this.form.lng = this.tempLng
        this.form.lat = this.tempLat
        this.mapShow = false
      },
      onSelected(val) {
        console.log(val)
        if (!utils.isNull(val.city) && !utils.isNull(val.area) && !utils.isNull(val.area.code)) {
          this.form.areaId = val.area.code
          this.form.areaName = val.province.value + val.city.value + val.area.value
          // this.form.areaName = val.area.value
        }
      },
      dialogShow() {
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      dialogConfirm(val) {
        this.form.officeId = val.id
        this.topName = val.name
        /* if (val.type == 0) {
          this.form.type = 1
          this.typeOneDisabled = false
          this.typeTwoDisabled = false
        } else {
          this.form.type = 1
          this.typeOneDisabled = true
        } */
      },
      saveshop(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true
            const date = new Date()
            this.form.modifyDate = date
            save(_this.form).then(response => {
              console.log(response)
              _this.clicked = false
              EventBus.$emit('storeHouse-add', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/storeHouse/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
